<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div>
    <div class="analysis_main" v-show="!showDetail">
      <div class="top">
        <div>元数据分析</div>
        <div>通过对业务场景定义，将场景中涉及到的要素库类型下的相关表数据进行分析，从而了解数据的血缘关系。</div>
      </div>
      <div class="cards" v-loading="loading">
        <div class="card" v-for="item in cardsList" :key="item">
          <div class="info">
            <div class="left">
              <div class="pic">{{ item?.name?.slice(0,1) }}</div>
            </div>
            <div class="right">
              <div class="name">{{ item?.name }}</div>
              <div class="des">{{ item?.description }}</div>
            </div>
          </div>
          <div class="foot">
            <div><el-link @click="viewDetail(item)">查看详情</el-link></div>
          </div>
        </div>
      </div>
    </div>
    <BusinessDetail v-if="showDetail" :data="businessData" @goback="showDetail = false" />
  </div>
</template>
<script name="metaAnalysis" setup>
import BusinessDetail from './component/BusinessDetail.vue';
import { getBusinessList } from '@/api/metaData/index';
//卡片列表
const cardsList = ref([1, 2, 3, 4, 5]);
// 展示详情页面
const showDetail = ref(false);
// 点击查看的业务场景
const businessData = ref(null);
const loading = ref(false);
const queryParams = ref({
  pageNum: 1,
  pageSize: 1000,
  name: '',
  creator: '',
  isAsc: 'descending'
});
// 查看详情
const viewDetail = (data) => {
  showDetail.value = true;
  businessData.value = data;
};
const doQuery = () => {
  cardsList.value = [];
  loading.value = true;
  getBusinessList(queryParams.value)
    .then((res) => {
      if (res) {
        cardsList.value = res?.rows;
      }
    })
    .finally(() => {
      loading.value = false;
    });
};
onMounted(()=>{
  doQuery();
})
</script>
<style lang="scss" scoped>
.analysis_main {
  height: calc(100vh - 84px);
  width: 100%;
  font-size: 12px;
  .top {
    padding: 10px;
    > div:nth-child(1) {
      font-weight: 600;
    }
    > div:nth-child(2) {
      margin-top: 10px;
    }
  }
  .cards {
    width: 100%;
    height: calc(100vh - 146px);
    background: #f0f2f5;
    display: flex;
    flex-wrap: wrap;
    align-content: baseline;
    overflow-y: auto;
    padding: 10px 0;
    .card {
      height: 180px;
      background: #fff;
      border: 1px solid #d9d9d9;
      margin: 0 0 10px 10px;
      flex: 0 0 24%;
      border-radius: 10px;
      .info {
        width: 100%;
        height: calc(100% - 50px);
        display: flex;
        padding: 10px;
        padding-top: 20px;
        .left {
          width: 20%;
          .pic {
            height: 40px;
            width: 40px;
            background: #409eff;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            color: #fff;
          }
        }
        .right {
          // padding-left: 10px;
          .name {
            font-weight: 600;
            font-size: 16px;
          }
          .des {
            margin-top: 10px;
            color: #909399;
          }
        }
      }
      .foot {
        height: 50px;
        width: 100%;
        background: #f7f9fa;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  :deep(.el-link__inner) {
    font-size: 12px;
    color: #409eff;
  }
}
</style>
